
// 获取 本地存储里面的 CMSTOKEN 
// 如果没有登录 不能访问首页 需要跳转到登录页面
const token = localStorage.getItem('CMSTOKEN')
if (!token) {
  alert('亲，您没有登录😊')
  location.href = './login.html'
}

/*
  1. 打开页面 发送ajax 请求 查询全部学员
      1.1 封装函数 getStudentList 
      1.2 在函数里面 发送 ajax 请求
      1.3 数据是否请求成功
      1.4 将数据渲染到页面上面
*/

const tbody = document.querySelector('tbody')

const getStudentList = () => {
  axios({
    url: '/student/list'
  }).then(({ data: res }) => {
    // console.log(res)
    if (res.code !== 0) return Toast.fail(res.message)
    Toast.success(res.message)
    tbody.innerHTML = res.data.map(item => `
    <tr>
      <th scope="row">${item.id}</th>
      <td>${item.name}</td>
      <td>${item.age}</td>
      <td>${item.sex}</td>
      <td>${item.group}</td>
      <td>${item.phone}</td>
      <td>${item.salary}</td>
      <td>${item.truesalary}</td>
      <td>${item.province + item.city + item.county}</td>
      <td>
        <button type="button" class="btn btn-primary btn-sm edit" data-id="${item.id}">修改</button>
        <button type="button" class="btn btn-danger btn-sm del"  data-id="${item.id}">删除</button>
      </td>
    </tr>
    `).join('')
  })
}

getStudentList()


/*
  2. 删除学员信息
    2.1 使用事件委托 给 tbody 注册事件 
    2.2 判断点击是不是删除按钮
    2.3 发送 ajax 
    2.4 成功 需要重新渲染页面
*/

tbody.addEventListener('click', function (e) {
  if (e.target.classList.contains('del')) {
    if (confirm('确认要删除吗？')) {
      axios({
        url: '/student/delete',
        method: 'delete',
        params: {
          id: e.target.dataset.id
        }
      }).then(({ data: res }) => {
        // console.log(res)
        if (res.code !== 0) return Toast.fail(res.message)
        Toast.success(res.message)
        getStudentList()
      })
    } else {
      Toast.info('取消删除')
    }
  }
})

/*
  3. 点击添加学员 弹出 模态框
*/

// 获取添加学员的模态框
const myModal = new bootstrap.Modal(document.querySelector('#addModal'))

// 获取 添加学员的按钮 注册点击事件
document.querySelector('.btnAddStu').addEventListener('click', function () {
  myModal.show()
  // 调用获取省份
  getProvince()
  document.querySelector('.addModalLabel').innerHTML = '录入新学员'
  document.querySelector('.btnAddStudent').innerHTML = '确认添加'
  document.querySelector('.add-form').reset()
  document.querySelector('[name=city]').innerHTML = `<option>--市--</option>`
  document.querySelector('[name=county]').innerHTML = `<option>--区县--</option>`
  // 删除 按钮身上的 自定义属性
  document.querySelector('.btnAddStudent').removeAttribute('data-id')
})


/*
  4. 省市区 三级联动
    4.1 打开 模态框 发送请求 获取所有的省份 建议 封装函数
*/

const province = document.querySelector('[name="province"]')
const city = document.querySelector('[name="city"]')
const county = document.querySelector('[name="county"]')

const getProvince = () => {
  axios({
    url: '/geo/province'
  }).then(({ data: res }) => {
    // console.log(res)
    province.innerHTML = '<option value="">--省--</option>' + res.map(item => `
      <option value="${item}">${item}</option>
    `).join('')
  })
}

/*
  5. 当省里面的内容发生改变 发送 ajax 获取 对应的市
    5.1 给 province 注册 change 
    5.2 发送 ajax 获取对应的城市 
    5.3 将对应的数据 渲染 到 市
*/

province.addEventListener('change', function () {
  // 解决bug 省发生改变 影响城市 将 区县里面的 <option></option>
  county.innerHTML = '<option value="">--区/县--</option>'
  // console.log(this.value)
  axios({
    url: '/geo/city',
    params: {
      pname: this.value
    }
  }).then(({ data: res }) => {
    // console.log(res)
    city.innerHTML = '<option value="">--市--</option>' + res.map(item => `
      <option value="${item}">${item}</option>
    `).join('')
  })
})



city.addEventListener('change', function () {
  // console.log(this.value)
  axios({
    url: '/geo/county',
    params: {
      pname: province.value,
      cname: this.value
    }
  }).then(({ data: res }) => {
    // console.log(res)
    county.innerHTML = '<option value="">--区/县--</option>' + res.map(item => `
      <option value="${item}">${item}</option>
    `).join('')
  })
})


/*
  7. 添加学员
    7.1 获取 add-form 表单 注册submit 事件
    7.2 阻止表单的默认行为
    7.3 获取用户输入的数据 
    7.4 发送ajax 
    7.5 判断数据是否请求成功
    7.6 重新渲染 清空表单 关闭模态框
*/

document.querySelector('.add-form').addEventListener('submit', function (e) {
  e.preventDefault()
  // 根据 Input 标签 获取输入框的值
  const data = serialize(this, { hash: true })

  // 获取 按钮身上的 自定义属性的值
  const id = this.querySelector('.btnAddStudent').dataset.id

  let url = '/student/add'  // 请求的url 地址
  let method = 'post'      // 请求方式

  if (id) {
    data.id = id
    url = '/student/update'
    method = 'put'
  }

  axios({
    url,
    method,
    data
  }).then(({ data: res }) => {
    if (res.code !== 0) return Toast.fail(res.message)
    Toast.success(res.message)
    getStudentList()
    this.reset()
    myModal.hide()
  }).catch(err => {
    // console.log(err.response.data.message)
    Toast.fail(err.response.data.message)
  })


})


/*
  8. 点击 修改按钮 显示模态框
    8.1 使用事件委托 给 修改按钮注册点击事件
    8.2 判断 点击是否是 修改按钮
    8.3 显示模态框
    8.4 修改 「录入新学员」---> 「修改学员信息」 修改 「确认添加」 ----> 「确认修改」
    8.5 发送 ajax 获取 对应的学员的信息
    8.6 数据回显
*/

tbody.addEventListener('click', function (e) {
  if (e.target.classList.contains('edit')) {
    // console.log(1)
    myModal.show()
    document.querySelector('.addModalLabel').innerHTML = '修改学员信息'
    document.querySelector('.btnAddStudent').innerHTML = '确认修改'
    // 获取自定义属性的值
    const id = e.target.dataset.id

    getProvince()

    axios({
      url: '/student/one',
      params: {
        id
      }
    }).then(({ data: res }) => {
      // console.log(res)
      if (res.code !== 0) return Toast.fail(res.message)
      // console.log(res.data)
      // for (let k in res.data) {
      //   // 属性选择器 根据HTML标签的属性 找到对应的元素
      //   // [attr] 根据属性名找对应的 元素
      //   // [attr=value] 要求属性的属性值一定是某个值才可以匹配到对应的元素
      //   const input = document.querySelector(`[name=${k}]`)


      //   // console.log(input)
      //   if (input) {
      //     input.value = res.data[k]
      //   }
      // }
      // 判断 res.data.sex 值
      // console.log(res.data.sex)
      // if (res.data.sex === '男') {
      //   // 需要获取 name=sex 的 dom元素
      //   document.querySelectorAll('[name=sex]')[0].checked = true
      // } else {
      //   // document.querySelectorAll('[name=sex]')[0].value = '女'
      //   document.querySelectorAll('[name=sex]')[1].checked = true
      // }

      document.querySelector('[name=name]').value = res.data.name
      document.querySelector('[name=age]').value = res.data.age
      document.querySelector('[name=group]').value = res.data.group
      document.querySelector('[name=phone]').value = res.data.phone
      document.querySelector('[name=salary]').value = res.data.salary
      document.querySelector('[name=truesalary]').value = res.data.truesalary

      // 如何确认是 编辑学生 还是 添加学生
      // 如果是编辑学生 给 确认修改的按钮 添加一个自定义属性 属性值 就是 当前被修改的 id值
      document.querySelector('.btnAddStudent').dataset.id = res.data.id



      if (res.data.sex === '男') {
        // 需要获取 name=sex 的 dom元素
        document.querySelectorAll('[name=sex]')[0].checked = true
      } else {
        // document.querySelectorAll('[name=sex]')[1].value = '女'
        document.querySelectorAll('[name=sex]')[1].checked = true
      }

      // 让其默认显示黑龙江省
      document.querySelector('[name=province]').value = res.data.province
      // 显示市
      document.querySelector('[name=city]').innerHTML = `<option value="${res.data.city}" selected>${res.data.city}</option>`
      document.querySelector('[name=county]').innerHTML = `<option value="${res.data.county}" selected>${res.data.county}</option>`

    })
  }
})



// var myModalEl = document.getElementById('addModal')
// myModalEl.addEventListener('hidden.bs.modal', function (event) {
//   // do something...
//   // console.log(myModalEl)
//   // 找到表单将表单里面的数据清空
// })